<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    侦听器
      监听data值的变化
    
    watch: {
      data中属性名 (newValue, oldValue) {        
        // 新值和旧值
      },
      // 还可以现在methods中创建好方法
      data中属性名: '方法名',
      data中属性名: {
        handler (newValue, oldValue) {
          // 这个函数就是上面的那种写法

        },
        deep: true, // 监听对象内属性的变化
        immediate: true // 页面刷新就直接监听变化（监听第一次变化）
      },
      // 我们还可以直接去监听对象中某个属性的变化
      'data中属性名.对应属性名' () {},
      // 我们还可以为一个属性去添加多个监听函数
      data中属性名: [
        fn1, fn2
      ]
    }


   -->
  <div id="app">
    {{msg}}
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // msg: '内容'
        msg: {
          a: 1,
          b: 2
        }
      },
      watch: {
        /* msg (newValue, oldValue) {
          console.log(newValue, oldValue)
        } */
        // msg: 'watchMsg'
        /* msg: {
          handler: 'watchMsg',
          // immediate: true
          deep: true
        } */
        /* 'msg.a': {
          handler: 'watchMsg'
        } */

        msg: [
          function handler1 () {
            console.log(1)
          },
          function handler2 () {
            console.log(2)
          }
        ]
      },
      methods: {
        watchMsg (newValue, oldValue) {
          console.log(newValue, oldValue)
        }
      }

    })
  </script>
</body>
</html>